import * as YvanUI from "yvan-ui-wotu"
import CustomData from "../widget/custom.data";

const React = YvanUI.React
const _ = YvanUI.lodash

interface Ref {
    grid1: YvanUI.Grid
}

export default class GridCheck extends YvanUI.Scope<void, Ref> {

    main = this.$$({
        check1: '',
        gridChecked: []
    })

    vjson = {
        view: 'page',
        title: 'GridCheck',
        items: [
            {
                view: 'card',
                bodyStyle: {
                    padding: 0
                },
                items: [
                    {
                        view: 'grid',
                        title: 'GridCheck',
                        ref: 'grid1',
                        idField: "customerid",
                        toolbar: [
                            {
                                view: 'button',
                                text: '批量删除',
                                icon: 'fa fa-remove',
                                type: 'danger',
                                // grid.toolbar 的内容都不需要写 $watch, 因为表格状态刷新都会重新渲染 toolbar
                                disabled: () => this.main.gridChecked.length <= 0,
                                onClick: () => {
                                    YvanUI.confirm(`是否真的删除这 ${this.main.gridChecked.length} 行数据?`,
                                        () => new Promise((resolve, reject) => {
                                            setTimeout(() => {
                                                this.main.gridChecked.splice(0, this.main.gridChecked.length)
                                                resolve()

                                            }, 3000)
                                        })
                                    )
                                }
                            }
                        ],
                        onCellClicked: (sender, e: any) => {
                            if (e.colDef.view === "checkbox") {
                                return
                            }
                            e.toggle()
                        },
                        columns: [
                            {field: "customerid", hidden: true},
                            {
                                title: '操作',
                                resizable: false,
                                suppressAutoSize: true,
                                suppressSizeToFit: true,
                                pinned: 'left',
                                width: 120,
                                render: (param: YvanUI.IGridCellRenderParam) => {
                                    const {data} = param
                                    return [
                                        {
                                            view: 'button',
                                            text: '添加',
                                            type: 'link',
                                            size: 'small',
                                            onClick: () => YvanUI.notifyInfo('添加' + data.customerid),
                                        },
                                        {
                                            view: 'button',
                                            text: '编辑',
                                            type: 'link',
                                            size: 'small',
                                            onClick: () => YvanUI.notifyInfo('编辑' + data.customerid),
                                        }
                                    ]
                                }
                            },
                            {
                                view: 'checkbox',
                                title: '勾选',
                                bind: 'main.gridChecked',
                                checkboxDisabled: (param: YvanUI.IGridCellRenderParam) => {
                                    return param.data.industryclass === '2'
                                },
                                onCheckboxChange: (param: YvanUI.IGridCellRenderParam) => {
                                    console.log(param)
                                }
                            },
                            {field: "customercode", title: "客户编号", width: 80,},
                            {field: "customername", title: "客户名称", width: 120},
                            {field: "logogram", title: "助记码", width: 80},
                            {field: "industryclass", title: "客户类型", width: 100},
                            {field: "customertype", title: "客户类别", width: 100},
                            {field: "zip", title: "邮编", width: 80},
                            {field: "contact", title: "联系人", width: 80},
                            {field: "telephone", title: "电话", width: 80},
                            {field: "province", title: "省", width: 80},
                            {field: "city", title: "市", width: 80},
                            {field: "address", title: "地址", width: 100},
                            {field: "ownername", title: "所属货主", width: 100},
                            {field: "isdefaultowner", title: "是否默认货主", width: 120},
                            {field: "routeid", hidden: true},
                            {field: "routename", title: "线路名称", width: 120},
                            {field: "isenable", title: "是否启用", width: 100},
                            {field: "remark", title: "备注", width: 100},
                        ],
                        dataSource: {
                            func: () => {
                                return new Promise(resolve => {
                                    return resolve(CustomData)
                                })
                            }
                        },
                        onDataSourceAfter: (sender: YvanUI.Grid, dataOrgin: any[], raw: any, api: any) => {
                            const offset = (sender.currentPage - 1) * sender.pageSize
                            const endOffset = (offset + sender.pageSize > dataOrgin.length) ? dataOrgin.length : offset + sender.pageSize

                            _.defer(() => {
                                sender.checkAll();
                            })

                            return {
                                pagination: {
                                    current: sender.currentPage,
                                    total: dataOrgin.length,
                                    size: sender.pageSize
                                },
                                data: dataOrgin.slice(offset, endOffset)
                            }
                        }
                    }
                ]
            }
        ]
    }
}